<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <input type="checkbox" checked>
    <a index="1" href="#">111</a>





    <script>

        // 标签的属性

        //    自定义属性
        //    自有属性 


        // attr 也可以用来设置自有属性  ，它对于某些特殊属性  checked / disabled ...  值省略的
        //   此时必须使用prop  


        function GetEle(ele) {
            // 获取所有的元素
            this.eles = document.querySelectorAll(ele);
        }


        // $符号就是实例化对象   省略每一次的new
        function $(ele) {
            return new GetEle(ele)
        }

        // 给标签添加自定义属性
        // attr
        // $('p').attr('index')
        // $('p').attr('index' , 'i')

        GetEle.prototype.attr = function (key, value) {
            // 需要判断参数的个数
            if (key && value) {
                this.eles.forEach(v => {
                    v.setAttribute(key, value);
                })
            } else {
                // 值传一个参数  --- 返回这个属性值

                // 判断参数是字符串还是对象
                if (typeof key === 'object') {
                    this.eles.forEach(v => {
                        // 遍历对象
                        for (let k in key) {
                            v.setAttribute(k, key[k]);
                        }
                    })
                } else {
                    return this.eles[0].getAttribute(key);
                }

            }
        }


        // prop   property属性    checked / src / href
        //   设置或者获取自有属性
        GetEle.prototype.prop = function (key, value) {
            // 需要判断参数的个数
            if (key && value) {
                this.eles.forEach(v => {
                    // v.id = 'dd'
                    // v.className = 'a'
                    if (key === 'class') {
                        key = 'className';
                    }
                    v[key] = value;
                })
            } else {
                // 值传一个参数  --- 返回这个属性值

                // 判断参数是字符串还是对象
                if (typeof key === 'object') {
                    this.eles.forEach(v => {
                        // 遍历对象
                        for (let k in key) {
                            // 类名的时候   只能使用  className
                            if (k === 'class') {
                                v.className = key[k]
                            } else {
                                v[k] = key[k];
                            }
                        }
                    })
                } else {
                    return this.eles[0][key];
                }

            }
        }

        $('body').attr('index', 2);

        console.log($('body').attr('index'));

        $('body').prop({ class: 'a', id: 'b' })

        console.log($('input').prop('checked'));



        // $('a').prop('href', '#');

        $("a").attr('href', '#')


    </script>

</body>

</html>